import React, { Component } from 'react'
import './index.css'
import recommendImg from '../../../../assets/img/recommend.jpeg';
import mz from '../../../../assets/img/mz.png';
import add from '../../../../assets/img/add.png';
import vip from '../../../../assets/img/vip.png';
import { Link } from 'react-router-dom';
export default class Tuijian extends Component {
    render() {
        let { recommendList } = this.props;
        return (
            <div className='recommend'>
                <div className='recommend-img'><img src={recommendImg} alt={recommendImg}></img></div>
                <div className='recommend-list'>
                    {recommendList.map((item, index) => <div className='good-item' key={index}>
                        <Link to={"/item/" + item.ptKey}>
                            <div className='good-img'><img src={item.listImages} alt=""></img></div>
                            <div className='tip'>
                                <div className='tip-img'><img src={mz} alt=""></img></div>
                            </div>
                            <div className='title'>{item.name}</div>
                            <div className='guige'>{item.displayName}</div>
                            <div className='price-wrap'>
                                <div className='left'>
                                    <span style={{ fontWeight: 700, color: '#fd4b63', fontSize: '13px' }}>￥</span>
                                    <span style={{ fontWeight: 700, color: '#fd4b63', fontSize: '18px' }}>{item.origPrice}</span><br />
                                    <span style={{ color: '#111', fontSize: '12px', marginTop: '10px', display: 'inline-block' }}>￥{item.supplyPrice}</span>
                                    <div className='vip'><img src={vip} alt=""></img></div>
                                </div>
                                <div className='right'><img src={add} alt=""></img></div>
                            </div>
                        </Link>
                    </div>)}
                </div>
            </div>
        )
    }
}
